<template>
  <div>
    <!-- <p>{{ a }}</p> -->
     <ul>
        <li v-for="item in list" :key="item.id">{{ item.name }} - {{ item.age }}</li>
     </ul>
  </div>
</template>

<script lang="ts" setup>
import {type PersionList} from '@/types/Persion'
import { defineProps, defineExpose, withDefaults } from 'vue';
const name = '张三';
const age = 18;

function getInfo() {
    return {
        name,
        age
    }
}

// 接收父组件传递过来的参数
// 下面的写法是作用是 接收父组件传递过来的参数
// 并且将参数的类型定义为 string 类型
// 并且将参数的默认值定义为 ''
// const props = defineProps({
//     // a: {
//     //     type: String,
//     //     default: '' 
//     // },
//     list: {
//         // 限制父组件传递过来的参数，类型必须是 PersionList 类型
//         // 并且将参数的默认值定义为 []
//         type: Array as PropType<PersionList>,
//         default: () => []
//     }
// })

// 限制父组件传递过来的参数
// 下面的写法是作用是 限制父组件传递过来的参数
// 现在父组件传递过来的参数必须是 list 属性，并且类型是 PersionList 类型，其他的参数都不允许
// list? 表示 list 属性是可选的，父组件可以不传 list 属性
// withDefaults 表示如果父组件没有传递 list 属性，那么就使用默认值 []
// 下面的写法为 接收list，并且限制类型，并且设置默认值
withDefaults(defineProps<{
    list?: PersionList ,
    a: string
}>(),{list: []})


// console.log(props.a);
defineExpose({
    name,
    age,
    getInfo 
})
</script>

<style scoped>

</style>